import {FC, useState} from 'react';
import {
  StyleSheet,
  TouchableHighlight,
  GestureResponderEvent,
} from 'react-native';
import {View} from '@ant-design/react-native';
import UnitText from './UnitText';
const ItemList: FC<{
  title?: string;
  children: string | JSX.Element;
  disabled?: boolean;
  onPress: (event: GestureResponderEvent) => void;
}> = ({title, children, disabled, onPress}) => {
  //   const [_, setCount] = useState(0);
  //   const onPress = () => setCount(prevCount => prevCount + 1);
  return (
    <>
      {!disabled ? (
        <TouchableHighlight
          underlayColor="#ededed"
          onPress={onPress}
          style={styles.box}>
          <>
            {title && <UnitText>{title}</UnitText>}
            {children && <View style={styles.right}>{children}</View>}
          </>
        </TouchableHighlight>
      ) : (
        <View style={styles.box}>
          <>
            <UnitText>{title}</UnitText>
            <View style={styles.right}>{children}</View>
          </>
        </View>
      )}
    </>
  );
};
const styles = StyleSheet.create({
  box: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 12,
    textAlign: 'center',
  },
  right: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    textAlign: 'center',
  },
});
export default ItemList;
